<template>
  <el-button :type="buttonStyle" :size="size" @click="toggle">
    <template v-if="isShowArrow">
      <i v-if="!value" class="el-icon-arrow-up"></i>
      <i  v-else class="el-icon-arrow-down"></i>
    </template>
    {{value?(displayLabel?displayLabel:$t('message.unfold')):
        (hiddenLabel?hiddenLabel:$t('message.fold'))}}</el-button>
</template>
<script>
/**
 * 隐藏/显示 开关 vmodel:false==显示 反之隐藏
 */
export default {
  name: "FilterCondition",
  props:{
     buttonStyle: {
       type: String,
       default:"text"
     },
     value:{},
     size:{default:"medium"},
     hiddenLabel:{default:""},
     displayLabel:{default:""},
     readonly:{default:false},
     isShowArrow:{default:true}
  }, 
  data() {
    return {
    };
  },
  methods: {
    toggle(){
      console.log(this.readonly);
      
      if (!this.readonly){
        this.$emit('input', !this.value)
      }
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss">
</style>
